<script>
import NavBar from '@/components/NavBar'
import { randomId } from '@/utils'
export default {
  name: 'Item',
  components: {
    NavBar
  },
  props: {
    list: {
      type: Array,
      default: () => []
    },
    index: {
      type: Number,
      default: null
    },
    flag: {
      type: String,
      default: null
    },
    sort: {
      type: Boolean,
      default: false
    },
    filter: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      unId: null,
      filterDataObj: {
        title: '筛选',
        flag: 'filter',
        unId: randomId(),
        children: []
      }
    }
  },
  watch: {
  },
  methods: {
    createItem(h, list) {
      const vnode = []
      for (let i = 0; i < list.length; i++) {
        const item = list[i]
        if ('show' in item && !item.show) continue
        const active = this.unId === item.unId
        const v = h('div', {
          class: ['filter-bar-item', { 'filter-bar-item-active': active }],
          on: {
            click: e => {
              e.stopPropagation()
              if (active) {
                this.unId = null
                this.$emit('update:index', null)
                this.$emit('update:flag', null)
              } else {
                this.unId = item.unId
                this.$emit('update:index', i)
                this.$emit('update:flag', item.flag)
              }
            }
          }
        },
        [
          h('span', { class: 'filter-bar-item-text' }, item.title),
          h('svg-icon', { class: 'filter-bar-item-icon', props: { iconClass: active ? 'shang' : 'xia' }})
        ]
        )
        vnode.push(v)
      }
      return vnode
    },
    closeFlag() {
      this.unId = null
    }
  },
  render(h) {
    const itemList = [...this.list]
    if (this.filter) {
      itemList.push(this.filterDataObj)
    }
    return h('NavBar', { class: 'nav-bar-item', attrs: { horizontal: true, space: false }}, this.createItem(h, itemList))
  }
}
</script>
<style lang="less" scoped>
    .filter-bar-item{
      // width: 62px;
      height: 26px;
      line-height: 26px;
      background: #FFFFFF;
      border-radius: 2px;
      color: rgba(51, 51, 51, 1);
      display: flex;
      justify-content: center;
      align-items: center;
      .filter-bar-item-text{
        font-size: 12px;
        color: #333;
        flex: 0 0 auto;
      }
      .filter-bar-item-icon{
        font-size: 18px;
        color: #bbb;
        margin-left: 4px;
        flex: 0 0 auto;
      }
    }
    .filter-bar-item+.filter-bar-item{
      margin-left: 10px;
    }
    .filter-bar-item-active{
      .filter-bar-item-text,.filter-bar-item-icon{
        color:#00C8B4;
      }
    }
</style>
<style lang="less">
.nav-bar-item{
  padding:10px 12px;
  justify-content: space-between !important;
}
</style>
